<template>
<div class="mt">
    <div class="box" v-for="c1 in categoryList" :key="c1.category.id">
        
        <div class="titleName">
            <p class="t1">{{ c1.category.name }}</p>
            <p class="t2">{{ c1.category.name }}</p>
        </div>
        <div class="goodsBox">
            <div class="goodsInfo" v-for="c2 in c1.itemList" :key="c2.id" @click="detailHandel">
                <div class="goodsImg">
                    <img :src="c2.listPicUrl" alt="">
                </div>
                <div class="goodsName">
                    <img v-if="c2.preLogo.length" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">
                    <span class="title">{{c2.name}}</span>
                </div>
                <div class="redPacket" v-if="c2.itemTagList.length">
                    <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
                    可用红包
                </div>
                <div class="price">
                    <!-- {{c2.finalPriceInfoVO.finalPrice && c2.finalPriceInfoVO.finalPrice.priceInfo.finalPrice.price}} -->
                    <span class="takePrice">到手￥159</span>
                    <del class="delPrice">￥239</del>
                </div>
                <div class="moneyOff" v-if="c2.finalPriceInfoVO.banner">{{ c2.finalPriceInfoVO.banner && c2.finalPriceInfoVO.banner.content }}</div>
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'CategoryGoodsInfo',
  })
</script>

<script lang="ts" setup>
import {useRouter} from "vue-router"
 defineProps(["categoryList"])
 const router = useRouter()
 function detailHandel(){
    router.push({
        path:"/detail"
    })
 }
</script>

<style lang="scss" scoped>
    .mt{
        margin-top: 20px;
      .box{
        width: 97%;
        margin:auto;
        .titleName{
            text-align: center;
            margin: 20px 0;
            .t1{
                font-size: 16px;
            }
            .t2{
                font-size: 10px;
                color: #a8a8a8;
            }
        }
        .goodsBox{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .goodsInfo{
                width: 48%;
                margin-top: 10px;
                .goodsImg{
                    width: 100%;
                    height: 180px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 14px;
                    }
                }
                .goodsName{
                    img{
                        width: 20px;
                        height: 20px;
                        vertical-align: middle;
                    }
                    .title{
                        font-size: 15px;
                        font-weight: 540;
                    }


                }
                .redPacket{
                    width: 75px;
                    height: 15px;
                    border: 1px solid #e8e8e8;
                    border-radius: 16px;
                    font-size: 10px;
                    line-height: 15px;
                    text-align: center;
                    img{
                        width: 10px;
                        height: 10px;
                        vertical-align: middle;
                    }
                }
                .price{
                    .takePrice{
                        color: red;
                        font-size: 16px;
                        font-weight: 550;
                    }
                    .delPrice{
                        font-size: 14px;
                        color: #aea39f;
                    }
                }
                .moneyOff{
                    display: inline-block;
                    padding: 2px 8px;
                    height: 20px;
                    line-height: 22px;
                    text-align: center;
                    background-color: red;
                    color:  #fff;
                    font-size: 16px;
                    font-weight: 550;
                    border-radius: 10px;
                }
            }
        }
      }
    }
</style>